<template>
	<view class="index-container">
		<view class="content">
			<view class="head" :style="{ 
				paddingTop: headPaddingTop + 'px' 
			}">
				<image src="https://puqinzc.oss-cn-beijing.aliyuncs.com/172ce858557a4833abf34e8f1157eab7.png"></image>
				<view class="title">枣庄市红十字会</view>
			</view>
	
			<view class="banner">
				<swiper class="swiper" :autoplay="true" :interval="6000">
					<swiper-item v-for="item in bannerList" :key="item.id">
						<image :src="item.imgUrl" mode="aspectFill" class="banner-img"></image>
					</swiper-item>
				</swiper>
			</view>
	
	
			<view class="hsz-card" v-if="isReleaseVersion">
				<view class="hsz-card-title">枣献枣爱 情暖八方</view>
				<view class="hsz-card-content">
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/blood/index')">
						<image src="../../static/home-icon-1.png"></image>
						<view class="name">无偿献血</view>
					</view>
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/zaogan/index')">	
						<image src="../../static/home-icon-2.png"></image>
						<view class="name">造血干细胞捐献</view>
					</view>
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/qiguan/index')">
						<image src="../../static/home-icon-3.png"></image>
						<view class="name">遗体（器官）捐献</view>
					</view>
				</view>
			</view>

			<view class="hsz-card">
				<view class="hsz-card-title">枣救枣安 救在身边</view>
				<view class="hsz-card-content">
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/jiuyuan/index')">
						<image src="../../static/home-icon-6.png"></image>
						<view class="name">应急救援</view>
					</view>
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/jiuhu/index')">	
						<image src="../../static/home-icon-5.png"></image>
						<view class="name">应急救护</view>
					</view>
					<view class="hsz-card-content-item" @click="gotoRoute('/pages/jiuzhu/index')">
						<image src="../../static/home-icon-4.png"></image>
						<view class="name">人道救助</view>
					</view>
				</view>
			</view>

			<!-- 会员和志愿者 -->
			<view class="vip-and-volunteer">
				<view class="vip-and-volunteer-item vip" @click="gotoRoute('/pages/vip/index')">
					<image src="../../static/home-vip.png"></image>
					<view class="name">成为会员</view>
				</view>
				<view class="vip-and-volunteer-item volunteer" @click="gotoRoute('/pages/volunteer/index')">
					<image src="../../static/home-volunteer.png"></image>
					<view class="name">成为志愿者</view>
				</view>
			</view>

			<!-- 爱心捐款 爱心捐物  联系我们 -->
			<view class="donation-and-contact" v-if="isReleaseVersion">
				<view class="donation-and-contact-item item-1" @click="gotoRoute('/pages/contributions/index')">
					<image src="../../static/card-1.png"></image>
					<view class="name">爱心捐款</view>
					
				</view>
				<view class="donation-and-contact-item item-2" @click="gotoRoute('/pages/moneyAndMaterials/index')">
					<image src="../../static/card-2.png"></image>
					<view class="name">爱心捐物</view>
					
				</view>
				<view class="donation-and-contact-item item-3" @click="gotoRoute('/pages/contactUs/index')">
					<image src="../../static/card-3.png"></image>
					<view class="name">联系我们</view>
					
				</view>
			</view>

		</view>

		<!-- 未缴费会员弹窗 -->
		<view class="success-popup" v-if="showUnpaidPopup" @click="handleCloseUnpaidPopup">
			<view class="popup-mask"></view>
			<view class="success-popup-content" @click.stop>
				<view class="success-icon">
					<image src="../../static/success2.png" mode="widthFix" />
				</view>
				<view class="success-title">会员申请已通过</view>
				<view class="success-message">请及时缴纳会费以完成会员资格激活</view>
				<view class="success-btn" @click="handleCloseUnpaidPopup">
					<text class="btn-text">去缴费</text>
				</view>
			</view>
		</view>
       
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { handleFormButtonClick } from '@/utils/loginGuard.js'
import { contactUs, getBannerList, getMemberInfo, getDictValByKey } from '@/utils/api.js'
import { copyToClipboard } from '@/utils/copy.js'

const bannerList = ref([])
const menuButtonInfo = ref({})
const statusBarHeight = ref(0)
const headPaddingTop = ref(44) // 默认值
const showContactPopup = ref(false)
const showCopySuccessPopup = ref(false)
const showUnpaidPopup = ref(false) // 未缴费会员弹窗
const menuSwitch = ref(false) // 菜单开关状态

// 获取菜单开关状态
const fetchMenuSwitch = async () => {
	try {
		const res = await getDictValByKey('menu_switch')
		if (res.code === 0 && res.data && Array.isArray(res.data) && res.data.length > 0) {
			// 获取第一条数据的dictValue，返回1是显示，其他是不显示
			const dictValue = res.data[0].dictValue
			menuSwitch.value = dictValue === '1'
			console.log('菜单开关状态:', menuSwitch.value, 'dictValue:', dictValue)
		}
	} catch (error) {
		console.error('获取菜单开关状态失败:', error)
		// 如果获取失败，默认不显示（安全起见）
		menuSwitch.value = false
	}
}

// 检测是否显示菜单
const isReleaseVersion = computed(() => {
	return menuSwitch.value
})

// 获取系统信息
const getSystemInfo = () => {
	try {
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight || 0
		
		// 延迟获取胶囊按钮信息，确保页面已经渲染
		setTimeout(() => {
			const menuButton = uni.getMenuButtonBoundingClientRect()
			menuButtonInfo.value = menuButton
			console.log('胶囊按钮信息:', menuButton)
			console.log('状态栏高度:', statusBarHeight.value)
			
			// 更新padding-top
			if (menuButton.top) {
				headPaddingTop.value = menuButton.top
				console.log('更新padding-top为:', headPaddingTop.value)
			}
		}, 100)
	} catch (error) {
		console.error('获取系统信息失败:', error)
	}
}

// 组件挂载时获取系统信息
onMounted(() => {
	getSystemInfo()
})

// 页面显示时重新获取胶囊按钮信息
onShow(() => {
	setTimeout(() => {
		try {
			const menuButton = uni.getMenuButtonBoundingClientRect()
			menuButtonInfo.value = menuButton
			console.log('onShow - 胶囊按钮信息:', menuButton)
			
			// 更新padding-top
			if (menuButton.top) {
				headPaddingTop.value = menuButton.top
				console.log('onShow - 更新padding-top为:', headPaddingTop.value)
			}
		} catch (error) {
			console.error('onShow - 获取胶囊按钮信息失败:', error)
		}
	}, 200)
	
	// 获取会员信息并检查是否需要显示未缴费弹窗
	fetchMemberInfo()
	// 重新获取菜单开关状态
	fetchMenuSwitch()
})

// 获取banner列表
const getBannerData = async () => {
	try {
		const res = await getBannerList()
		if (res.code === 0 && res.data) {
			bannerList.value = res.data
		}
	} catch (error) {
		console.error('获取banner失败:', error)
	}
}

getBannerData()


// 获取会员信息并检查是否需要显示未缴费弹窗
const fetchMemberInfo = async () => {
	try {
		const res = await getMemberInfo()
		if (res.code === 0 && res.data) {
			// 如果审核状态为1（已通过），显示未缴费弹窗
			if (res.data.auditStatus === 1) {
				// 延迟显示弹窗，确保页面完全加载
				setTimeout(() => {
					showUnpaidPopup.value = true
				}, 500)
			}
		}
	} catch (error) {
		console.error('获取会员信息失败:', error)
	}
}

// 关闭未缴费弹窗
const handleCloseUnpaidPopup = () => {
	showUnpaidPopup.value = false
	// 跳转到缴费页面
	uni.navigateTo({
		url: '/pages/my/pay'
	})
}

// 跳转
const gotoRoute = (path) => {
	// handleFormButtonClick(path)  
	uni.navigateTo({
		url: path
	})
}


// 处理联系我们
const handleContact = () => {
	// 这里可以添加联系我们的逻辑
	console.log('联系客服')
	handleCloseContactPopup()
}
</script>

<style lang="scss" scoped>
	.index-container{
		// min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 200rpx;

		.content{
			position: relative;
			min-height: 382rpx; // 改为min-height，允许内容自适应高度
			// background: linear-gradient( 133deg, #FF5D48 0%, #F74943 100%);
			// background: url('@/static/home-bg.png') no-repeat center center;
			background: url('https://puqinzc.oss-cn-beijing.aliyuncs.com/963cb230418045c3af10db9aa95e6b01.png') no-repeat top center;
			background-size: 100% 484rpx;
			padding: 0 24rpx;

		}

		.head{
			display: flex;
			align-items: center;
			// padding-top: 16rpx; // 移除固定值，使用动态计算

			image{
				width: 56rpx;
				height: 56rpx;
				background: #eee;
				border-radius: 50%;
			}

			.title{
				color: #fff;
				font-size: 32rpx;
				padding-left: 12rpx;
			}
		}

		.banner{
			margin-top: 24rpx;
			.swiper{
				width: 100%;
				height: 320rpx;

				.banner-img{
					width: 100%;
					height: 320rpx;
					background: #eee;
					border-radius:24rpx;
				}
			}
		}

		.hsz-card{
			margin-top: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			border: 2rpx solid #EEEEF0;

			.hsz-card-title{
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.8);
				line-height: 40rpx;
			}

			.hsz-card-content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;

				.hsz-card-content-item{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;	
					padding-top: 16rpx;

					image{
						width: 72rpx;
						height: 72rpx;
						background: #eee;
						border-radius: 50%;
					}

					.name{
						font-size: 24rpx;
						color: rgba(0,0,0,0.8);
						line-height: 34rpx;
						margin-top: 16rpx;
					}
					
				}
			}
			
		}

		.vip-and-volunteer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.vip-and-volunteer-item{
				width: calc(50% - 13rpx);
				height: 156rpx;
				background: #F74943;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				&.vip{
					background: url('https://puqinzc.oss-cn-beijing.aliyuncs.com/25a31579a6e64457872d292f495999cb.png') no-repeat center center;
					background-size: 100% 100%;
				}
				&.volunteer{	
					background: url('https://puqinzc.oss-cn-beijing.aliyuncs.com/fd2b6f53caeb49b58ef5dd8ee19dcd6c.png') no-repeat center center;
					background-size: 100% 100%;
				}

				image{
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
					margin-left: 24rpx;
				}

				.name{
					font-size: 28rpx;
					color: #fff;
					line-height: 40rpx;
					margin-left: 40rpx;
				}
			}

		}

		.donation-and-contact{
			display: flex;
			align-items: center;
			margin-top: 24rpx;
			margin-left: -24rpx;

			.donation-and-contact-item{
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 24rpx;
				height: 152rpx;
				border-radius: 16rpx;
				border: 2rpx solid #F3F3F4;
				background: url('https://puqinzc.oss-cn-beijing.aliyuncs.com/5684271c8c3d4e5799704cdd6d81481a.png') no-repeat center center;
				background-size: 100% 100%;

				.name{
					font-size: 24rpx;
					color: #A0676C;
					line-height: 34rpx;
					margin-left: 12rpx;
					font-weight: 600;
				}

				image{
					width: 64rpx;
					height: 64rpx;
					margin-left: 18rpx;
				}
				
			}

		}
	}

	.friendly-link{
		height: 88rpx;
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		border: 2rpx solid #EEEEF0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;

		.friendly-link-left{
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.name{
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.80);
				line-height: 40rpx;
				margin-left: 16rpx;
			}
		}

		.friendly-link-right{
			display: flex;
			align-items: center;
			.text{
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				line-height: 34rpx;
				margin-right: 16rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	// 联系我们弹窗样式
	.contact-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		.popup-content {
			position: relative;
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			z-index: 1000;
			display: flex;
			flex-direction: column;

			.popup-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 24rpx 24rpx 24rpx;
				position: relative;
				border-bottom: 2rpx solid #f0f0f0;

				.popup-title {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 32rpx;
					font-weight: 500;
					color: #000;
					text-align: center;
				}

				.popup-close {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40rpx;
					color: rgba(0, 0, 0, 0.90);
					cursor: pointer;
					margin-left: auto;
				}
			}

			.popup-body {
				padding: 24rpx;

				.contact-item {
					display: flex;
					align-items: center;
					padding: 16rpx 0;
					border-bottom: 2rpx solid #E7E7E7;

					&:last-child {
						border-bottom: none;
					}

					.contact-label {
						width: 160rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.60);
					}

					.contact-value {
						flex: 1;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.80);
					}
				}
			}

			.popup-footer {
				padding: 24rpx;
				border-top: 2rpx solid #E7E8EB;

				.primary-btn {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
	}

	// 复制成功弹窗样式
	.copy-success-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		.copy-success-content {
			position: relative;
			width: 600rpx;
			min-height: 500rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			z-index: 1001;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 32rpx;

			.success-icon {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.success-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #000;
				margin-bottom: 16rpx;
				text-align: center;
			}

			.success-message {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.80);
				text-align: center;
				margin-bottom: 32rpx;
				line-height: 1.5;
			}

			.browser-guide {
				margin-bottom: 40rpx;

				.phone-frame {
					position: relative;
					width: 200rpx;
					height: 300rpx;
					background: #f5f5f5;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx;

					.browser-icon {
						width: 60rpx;
						height: 60rpx;
						background: #007AFF;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;
						position: relative;

						.browser-label {
							font-size: 20rpx;
							color: #fff;
							text-align: center;
						}

						&.browser-icon-1 {
							margin-top: 20rpx;
						}

						&.browser-icon-2 {
							margin-top: 40rpx;
						}
					}

					.highlight-box {
						position: absolute;
						top: 40rpx;
						left: 20rpx;
						width: 60rpx;
						height: 60rpx;
						border: 4rpx solid #FF3B30;
						border-radius: 12rpx;
					}

					.highlight-arrow {
						position: absolute;
						top: 70rpx;
						left: 90rpx;
						width: 0;
						height: 0;
						border-left: 20rpx solid #FF3B30;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
					}
				}
			}

			.success-btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-text {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	// 成功弹窗样式
	.success-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
		}

		.success-popup-content {
			position: relative;
			width: 600rpx;
			background: #fff;
			border-radius: 24rpx;
			padding: 48rpx;
			text-align: center;
			box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
			animation: popupSlideIn 0.3s ease-out;

			@keyframes popupSlideIn {
				from {
					opacity: 0;
					transform: translateY(40rpx) scale(0.9);
				}
				to {
					opacity: 1;
					transform: translateY(0) scale(1);
				}
			}

			.success-icon {
				width: 120rpx;
				height: 120rpx;
				margin: 0 auto 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.success-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 24rpx;
			}

			.success-message {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 48rpx;
			}

			.success-btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
				box-shadow: 0 8rpx 24rpx rgba(249, 98, 62, 0.3);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					box-shadow: 0 4rpx 12rpx rgba(249, 98, 62, 0.3);
				}

				.btn-text {
					color: #fff;
				}
			}
		}
	}
</style>